<template>
    <div>
        <van-nav-bar
            title = "登录"
            left-text = "返回"
            left-arrow
            @click-left = "goBack"
        />
        <div class="register_panel">
             <van-field
                v-model="username"
                label="用户名"
                icon="clear"
                placeholder="请输入用户名"
                required
                @click-icon="username = ''"
                :error-message = "usernameError"
            />
            <van-field
                v-model="password"
                type="password"
                label="密码"
                placeholder="请输入密码"
                required
                :error-message="passwordError"
            />
            
            <div class="register-button">
                <van-button type="primary"  class="loginBtn" @click="loginAction"  :loading="openLoad">登录</van-button>
                <van-button type="primary" class="registerBtn" @click="registerAction"  :loading="openLoad">转到注册</van-button>
            </div>
        </div>
    </div>
</template>

<script>
    import axios from 'axios'
    import { Toast } from 'vant'
    export default {
        data(){
            return{
                username : '',
                password : '',
                usernameError : '',
                passwordError : '',
                openLoad : false  //是否开启用户的Loading状态
            }
        },
        created(){
            if(localStorage.userInfo){
                    Toast.success('您已登录')
                    this.$router.push('/home')
            }
        },
        mounted:function(){
            this.$store.dispatch('HIDENAV')
            // console.log("1111111111");
        },
        destroyed:function(){
            this.$store.dispatch('SHOWNAV')
        },
        methods:{
            goBack(){
                this.$router.go(-1)
            },
            loginAction(){
                this.checkForm() && this.axiosLoginUser()
            },
            registerAction(){
                this.openLoad = false
                this.$router.push('/register')
            },
            //axios用户登录方法
            axiosLoginUser(){
                this.openLoad = true;
                    axios({
                    url: 'http://localhost:3000/user/login',
                    method: 'post',
                    data:{
                        userName:this.username,
                        password:this.password
                    }
                    }).then(response=>{
                        const {data,status} = response
                        console.log("111111111",data);
                        let result = response.data;
                        if(status === 200){
                            if(data.msg === "登陆成功"){
                                new Promise((resolve,reject)=>{
                                    let userInfo = {userId:result.data.id, userName:result.data.user_name, memberPoints:result.data.member_points}
                                    localStorage.userInfo = JSON.stringify(userInfo)
                                    setTimeout(()=>{
                                        resolve()
                                    },500)
                                }).then(()=>{
                                        Toast.success('登录成功')
                                        this.$router.push('/home')
                                }).catch(err=>{
                                        Toast.fail('登录状态保存失败')
                                        console.log(err)
                                })
                                // document.cookie = "userId=result.data.id; userName=result.data.user_name"
                            }
                            if(data.msg === "密码错误"){
                                Toast.fail('用户名或密码错误')
                                this.password = ""
                                this.openLoad = false
                            }
                            if(data.msg === "用户名不存在"){
                                Toast.fail('找不到用户名，请检查是否有误')
                                this.openLoad = false
                            }
                        }   
                    })
                    .catch((error) => {
                        console.log(error)
                        Toast.fail('登录失败')
                        this.openLoad = false
                    })              
            },
            //****表单验证方法
            checkForm(){
                let isOk = true
                if(this.username.length<3||this.username.length>15){
                    this.usernameError = "输入用户名格式错误"
                    this.username = null
                    isOk=false
                }else{
                    this.usernameError = ''
                    if(this.password.length<6){
                        this.passwordError = '输入密码格式错误'
                        this.password = null
                        isOk = false
                    }else{
                        this.passwordError = ''
                    }
                } 
                

                return isOk
            }
        }
        
    }
</script>

<style >
    .register-panel{
        width:96%;
        border-radius: 5px;
        margin:20px auto;
        padding-bottom:50px;
    }
    .register-button{
        padding-top:15px;
    }
    .loginBtn{
        width: 6rem;
        height: 2.5rem;
        margin-right: 20px;
    }
    .registerBtn{
        width: 6rem;
        height: 2.5rem;
    }
</style>